<script setup>
import {onMounted, ref} from 'vue';
import {sendCode as getCode, login as log, loginCode as logCode} from "@/apis/login";
import router from "@/router";

const logRef = ref(null);
const regRef = ref(null);
const isLogOnTop = ref(true);

const account = ref("")
const password = ref("")
const code = ref("")

let isAnimating = false;



function checkCookie(cookieName) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [name, value] = cookie.split('=');
    if (name === cookieName) {
      return true;
    }
  }
  return false;
}

if (checkCookie('satoken')) {
  router.push({ name: 'home'}) // 替换为实际的首页URL
}

const sendCode = async () => {
  const res = await getCode(account.value);
}

const login = async () => {
  const res = await log(account.value, password.value)
  await loginTrue(res)
}
const  register = async () => {
  const res = await logCode(account.value, code.value)
  await loginTrue(res)
}

const loginTrue = async (res) => {
  if (res.data.code === 200) {
    await router.push({name: "home"})
  }
}

onMounted(() => {
  // logRef.value.style.backgroundColor = "#dadada"
  // regRef.value.style.backgroundColor = "#ffffff"
})

const handoff = () => {
  if (isAnimating) return
  isAnimating = true
  isLogOnTop.value = !isLogOnTop.value;

  logRef.value.style.animation = null;
  regRef.value.style.animation = null;

  if (isLogOnTop.value) {
    regRef.value.style.animation = 'regTopmost 1s ease-in-out'
    logRef.value.style.animation = 'logBelow 1s ease-in-out'
    regRef.value.style.transform = 'rotate(0deg)'
    logRef.value.style.transform = 'rotate(20deg)'
    setTimeout(() => {
      logRef.value.style.zIndex = 1;
      regRef.value.style.zIndex = 2;
    }, 500)

  } else {
    logRef.value.style.animation = 'logTopmost 1s ease-in-out'
    regRef.value.style.animation = 'regBelow 1s ease-in-out'
    logRef.value.style.transform = 'rotate(0deg)'
    regRef.value.style.transform = 'rotate(20deg)'
    setTimeout(() => {
      logRef.value.style.zIndex = 2;
      regRef.value.style.zIndex = 1;
    }, 500)
  }

  setTimeout(() => {
    isAnimating = false
  }, 1000)

};
</script>


<template>
  <div class="body">
    <div style="text-align: center;">
      <div><img src="../../images/log.png"/></div>

    </div>
    <div class="outerLayer">
      <form>
        <div ref="logRef" class="a">
          <div style="text-align: center;">
            <h2 class="h2" style="margin-top: 30px;margin-bottom: 10px">密码登录</h2>
            <div class="register">
              <div class="input">
                <el-input
                    style="width: 200px;"
                    v-model="account"
                    placeholder="手机号"
                />
              </div>
              <div class="input">
                <div style="width: 200px">
                  <el-input
                      v-model="password"
                      placeholder="密码"
                      show-password
                  >
                  </el-input>
                </div>
              </div>
              <div class="input">
                <div style="width: 200px">
                  <el-button type="primary" style="width: 200px" @click="login">登录</el-button>
                </div>
              </div>

              <div class="input">
                <div style="width: 200px">
                  <el-link type="primary" @click="handoff">验证码登录</el-link>
                </div>
              </div>

            </div>
          </div>
        </div>
      </form>

      <form>
        <div ref="regRef" class="b">
          <div style="text-align: center;">
            <h2 class="h2" style="margin-top: 30px;margin-bottom: 10px">验证码登录</h2>
            <div class="register">
              <div class="input">
                <el-input
                    style="width: 200px"
                    v-model="account"
                    placeholder="手机号"
                />
              </div>

              <div class="input">
                <div style="width: 200px">
                  <el-input
                      v-model="code"
                      placeholder="验证码"
                  >
                    <template #suffix>
                      <el-link :underline="false" @click="sendCode" style="font-size: 7px"><span>发送验证码</span>
                      </el-link>
                    </template>
                  </el-input>
                </div>
              </div>

              <div class="input">
                <div style="width: 200px">
                  <el-button type="primary" style="width: 200px" @click="register">登录/注册</el-button>
                </div>
              </div>

              <div class="input">
                <div style="width: 200px">
                  <el-link type="primary" @click="handoff">密码登录</el-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
   <!--嵌入视频-->
  <video class="loginVideo" autoplay muted loop controls>
    <source style="height: 100vh;width: 100vw" src="@/videos/login.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</template>

<style>
* {
  padding: 0;
  margin: 0;
  border: 0;
}

.loginVideo{
  position: fixed;
  bottom: 0;
  left: 0;
  pointer-events: none;
  filter: brightness(80%);
  z-index: -1; /* 将视频放在所有元素的下方 */
}

.loginVideo::-webkit-media-controls {
  display: none !important;
}

.loginVideo::-webkit-media-controls-enclosure {
  display: none !important;
}

.loginVideo::-webkit-media-controls-panel {
  display: none !important;
}

.body {
  //background-color: antiquewhite;
  height: 100vh;
}

.input {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 15px;
}

.register {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.outerLayer {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.a, .b {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.a {
  z-index: 1;
  transform: rotate(20deg);
}

.b {
  z-index: 2;
}

@keyframes logTopmost {
  0% {
    transform: translate(0, 0) rotate(20deg);
  }
  50% {
    transform: translate(-100px, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes logBelow {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(20deg);
  }
}

@keyframes regTopmost {
  0% {
    transform: translate(0, 0) rotate(20deg);
  }
  50% {
    transform: translate(+100px, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes regBelow {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(20deg);
  }
}

</style>